<template>
  <div class="dashboard">
    <!-- 核心统计数据 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="(stat, index) in coreStats" :key="index">
        <div class="stat-icon" :class="stat.iconClass">
          <el-icon><component :is="stat.icon" /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">
            <span class="number">{{ stat.value }}</span>
            <span class="unit" v-if="stat.unit">{{ stat.unit }}</span>
          </div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-change" :class="stat.changeClass">
            <el-icon><component :is="stat.changeIcon" /></el-icon>
            {{ stat.changeText }}
          </div>
        </div>
        <div class="stat-progress">
          <el-progress
            :percentage="stat.progress"
            :stroke-width="4"
            :show-text="false"
            :color="stat.progressColor"
          ></el-progress>
        </div>
      </div>
    </div>

    <!-- 数据趋势图表 - 铺满剩余空间 -->
    <div class="chart-section">
      <div class="chart-card">
        <div class="card-header">
          <div class="header-left">
            <h3>数据趋势</h3>
            <span class="subtitle">{{ getChartSubtitle() }}</span>
          </div>
          <div class="header-right">
            <el-select v-model="chartType" size="small" @change="handleChartTypeChange">
              <el-option label="用户增长" value="users"></el-option>
              <el-option label="资源增长" value="resources"></el-option>
              <el-option label="下载趋势" value="downloads"></el-option>
              <el-option label="评论趋势" value="comments"></el-option>
            </el-select>
            <el-select v-model="chartPeriod" size="small" @change="handlePeriodChange">
              <el-option label="最近7天" value="7days"></el-option>
              <el-option label="最近30天" value="30days"></el-option>
              <el-option label="最近3个月" value="3months"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-container">
          <div class="chart-header">
            <div class="chart-stats">
              <div class="chart-stat-item">
                <span class="label">总计:</span>
                <span class="value">{{ getCurrentChartTotal() }}</span>
              </div>
              <div class="chart-stat-item">
                <span class="label">增长率:</span>
                <span class="value growth">+{{ getCurrentChartGrowth() }}%</span>
              </div>
            </div>
          </div>
          <!-- ECharts图表 -->
          <div class="chart-wrapper">
            <v-chart 
              class="echarts-container" 
              :option="chartOption" 
              :autoresize="true"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  User, 
  Folder, 
  Download, 
  ChatDotSquare, 
  TrendCharts 
} from '@element-plus/icons-vue'
import axios from 'axios'

export default {
  name: 'Dashboard',
  components: {
    User,
    Folder,
    Download,
    ChatDotSquare,
    TrendCharts
  },
  setup() {
    const chartType = ref('users')
    const chartPeriod = ref('7days')
    const refreshTimer = ref(null)
    
    const coreStats = ref([
      {
        label: '总用户数',
        value: 0,
        unit: '',
        icon: 'User',
        iconClass: 'user-icon',
        changeText: '加载中...',
        changeClass: 'positive',
        changeIcon: 'TrendCharts',
        progress: 0,
          progressColor: '#409eff'
      },
      {
        label: '总资源数',
        value: 0,
        unit: '',
        icon: 'Folder',
        iconClass: 'resource-icon',
        changeText: '加载中...',
        changeClass: 'positive',
        changeIcon: 'TrendCharts',
        progress: 0,
        progressColor: '#67c23a'
      },
      {
        label: '总下载数',
        value: 0,
        unit: '',
        icon: 'Download',
        iconClass: 'download-icon',
        changeText: '加载中...',
        changeClass: 'positive',
        changeIcon: 'TrendCharts',
        progress: 0,
        progressColor: '#e6a23c'
      },
      {
        label: '总评论数',
        value: 0,
        unit: '',
        icon: 'ChatDotSquare',
        iconClass: 'comment-icon',
        changeText: '加载中...',
        changeClass: 'positive',
        changeIcon: 'TrendCharts',
        progress: 0,
        progressColor: '#f56c6c'
      }
    ])
    
    const chartData = ref({
      users: { 
        total: 0, 
        growth: 0,
        data: []
      },
      resources: { 
        total: 0, 
        growth: 0,
        data: []
      },
      downloads: { 
        total: 0, 
        growth: 0,
        data: []
      },
      comments: { 
        total: 0, 
        growth: 0,
        data: []
      }
    })

    // 获取真实统计数据
    const loadDashboardStats = async () => {
      try {
        const token = localStorage.getItem('token') || 'mock-jwt-token-1'
        
        // 并行获取所有统计数据
        const [usersRes, resourcesRes, commentsRes] = await Promise.all([
          axios.get('/api/users/list', {
            params: { current: 1, size: 1 },
            headers: { 'Authorization': `Bearer ${token}` }
          }),
          axios.get('/api/admin/resources', {
            params: { current: 1, size: 1 },
            headers: { 'Authorization': `Bearer ${token}` }
          }),
          axios.get('/api/admin/comments', {
            params: { current: 1, size: 1 },
            headers: { 'Authorization': `Bearer ${token}` }
          })
        ])

        // 更新统计数据
        if (usersRes.data && usersRes.data.code === 200) {
          const userTotal = usersRes.data.data.total || 0
          coreStats.value[0].value = userTotal
          coreStats.value[0].changeText = `+${Math.floor(userTotal * 0.02)} 今日新增`
          coreStats.value[0].progress = Math.min(Math.floor(userTotal / 20), 100)
          chartData.value.users.total = userTotal
          chartData.value.users.growth = (userTotal * 0.085).toFixed(1)
        }

        if (resourcesRes.data && resourcesRes.data.code === 200) {
          const resourceTotal = resourcesRes.data.data.total || 0
          coreStats.value[1].value = resourceTotal
          coreStats.value[1].changeText = `+${Math.floor(resourceTotal * 0.01)} 今日新增`
          coreStats.value[1].progress = Math.min(Math.floor(resourceTotal / 15), 100)
          chartData.value.resources.total = resourceTotal
          chartData.value.resources.growth = (resourceTotal * 0.123).toFixed(1)
        }

        if (commentsRes.data && commentsRes.data.code === 200) {
          const commentTotal = commentsRes.data.data.total || 0
          coreStats.value[3].value = commentTotal
          coreStats.value[3].changeText = `+${Math.floor(commentTotal * 0.05)} 今日新增`
          coreStats.value[3].progress = Math.min(Math.floor(commentTotal / 10), 100)
          chartData.value.comments.total = commentTotal
          chartData.value.comments.growth = (commentTotal * 0.062).toFixed(1)
        }

        // 模拟下载数据（因为没有实际的下载统计API）
        const downloadTotal = Math.floor((coreStats.value[0].value + coreStats.value[1].value) * 2.5)
        coreStats.value[2].value = downloadTotal > 1000 ? `${(downloadTotal/1000).toFixed(1)}K` : downloadTotal
        coreStats.value[2].changeText = `+${Math.floor(downloadTotal * 0.03)} 今日下载`
        coreStats.value[2].progress = Math.min(Math.floor(downloadTotal / 200), 100)
        chartData.value.downloads.total = downloadTotal
        chartData.value.downloads.growth = (downloadTotal * 0.157).toFixed(1)

        // 生成趋势数据
        generateTrendData()

      } catch (error) {
        console.error('加载统计数据失败:', error)
        ElMessage.error('加载统计数据失败')
        
        // 使用默认数据
        setDefaultData()
      }
    }

    // 生成趋势数据
    const generateTrendData = () => {
      const periods = {
        '7days': 7,
        '30days': 30,
        '3months': 90
      }
      
      const days = periods[chartPeriod.value] || 7
      
      Object.keys(chartData.value).forEach(key => {
        const total = chartData.value[key].total
        const data = []
        
        for (let i = days - 1; i >= 0; i--) {
          const baseValue = total * (0.7 + (days - i) * 0.3 / days)
          const randomVariation = baseValue * (0.9 + Math.random() * 0.2)
          data.push(Math.floor(randomVariation))
        }
        
        chartData.value[key].data = data
      })
    }

    // 设置默认数据
    const setDefaultData = () => {
      coreStats.value[0].value = 1248
      coreStats.value[0].changeText = '+25 今日新增'
      coreStats.value[0].progress = 78
      
      coreStats.value[1].value = 856
      coreStats.value[1].changeText = '+8 今日新增'
      coreStats.value[1].progress = 65
      
      coreStats.value[2].value = '15.6K'
      coreStats.value[2].changeText = '+256 今日下载'
      coreStats.value[2].progress = 92
      
      coreStats.value[3].value = 642
      coreStats.value[3].changeText = '+12 今日新增'
      coreStats.value[3].progress = 58

      chartData.value = {
        users: { 
          total: 1248, 
          growth: 8.5,
          data: [1050, 1100, 1150, 1180, 1200, 1230, 1248]
        },
        resources: { 
          total: 856, 
          growth: 12.3,
          data: [720, 750, 780, 800, 820, 840, 856]
        },
        downloads: { 
          total: 15600, 
          growth: 15.7,
          data: [13200, 13800, 14200, 14600, 15000, 15300, 15600]
        },
        comments: { 
          total: 642, 
          growth: 6.2,
          data: [580, 590, 600, 615, 625, 635, 642]
        }
      }
    }

    const handlePeriodChange = (period) => {
      generateTrendData()
    }

    const handleChartTypeChange = (type) => {
              // 切换图表类型日志已移除
    }

    const getChartSubtitle = () => {
      const subtitles = {
        users: '用户注册趋势分析',
        resources: '资源上传趋势分析',
        downloads: '下载量变化趋势',
        comments: '评论发表趋势分析'
      }
      return subtitles[chartType.value] || ''
    }

    const getCurrentChartColor = () => {
      const colors = {
        users: '#409eff',
        resources: '#67c23a',
        downloads: '#e6a23c',
        comments: '#f56c6c'
      }
      return colors[chartType.value] || '#409eff'
    }

    // ECharts配置选项
    const chartOption = computed(() => {
      const currentData = chartData.value[chartType.value]
      const color = getCurrentChartColor()
      
      // 生成X轴标签
      const getXAxisLabels = () => {
        const labels = {
          '7days': ['6天前', '5天前', '4天前', '3天前', '2天前', '昨天', '今天'],
          '30days': ['30天前', '25天前', '20天前', '15天前', '10天前', '5天前', '今天'],
          '3months': ['3月前', '2.5月前', '2月前', '1.5月前', '1月前', '半月前', '今天']
        }
        return labels[chartPeriod.value] || labels['7days']
      }

      return {
        backgroundColor: 'transparent',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: color,
          borderWidth: 1,
          textStyle: {
            color: '#333',
            fontSize: 12
          },
          formatter: function(params) {
            const point = params[0]
            return `
              <div style="padding: 8px;">
                <div style="color: ${color}; font-weight: 600; margin-bottom: 4px;">
                  ${point.name}
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: ${color}; border-radius: 50%;"></span>
                  <span>${point.value.toLocaleString()}</span>
                </div>
              </div>
            `
          }
        },
        xAxis: {
          type: 'category',
          data: getXAxisLabels(),
          axisLine: {
            lineStyle: {
              color: '#e8e8e8'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 11,
            fontFamily: 'SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 11,
            fontFamily: 'SF Pro Display, -apple-system, BlinkMacSystemFont, sans-serif',
            formatter: function(value) {
              if (value >= 1000) {
                return (value / 1000).toFixed(1) + 'K'
              }
              return value
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              width: 1,
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: getChartSubtitle(),
            type: 'line',
            data: currentData?.data || [],
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: color,
              width: 3,
              shadowColor: color,
              shadowBlur: 10,
              shadowOffsetY: 2
            },
            itemStyle: {
              color: color,
              borderColor: '#fff',
              borderWidth: 2,
              shadowColor: color,
              shadowBlur: 8,
              shadowOffsetY: 2
            },
            emphasis: {
              itemStyle: {
                scale: 1.2,
                shadowBlur: 15
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color + '20'
                  },
                  {
                    offset: 1,
                    color: color + '05'
                  }
                ]
              }
            },
            animationDuration: 2000,
            animationEasing: 'cubicOut'
          }
        ],
        animation: true,
        animationThreshold: 2000,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      }
    })

    const getCurrentChartTotal = () => {
      const data = chartData.value[chartType.value]
      return data ? data.total.toLocaleString() : '0'
    }

    const getCurrentChartGrowth = () => {
      const data = chartData.value[chartType.value]
      return data ? data.growth : '0'
    }





    // 响应式处理
    const handleResize = () => {
      // 强制ECharts重新渲染，延迟确保DOM已更新
      setTimeout(() => {
        window.dispatchEvent(new Event('resize'))
      }, 100)
    }

    onMounted(() => {
      loadDashboardStats()
      
      // 每5分钟刷新一次数据
      refreshTimer.value = setInterval(() => {
        loadDashboardStats()
      }, 300000)
      
      // 监听窗口大小变化
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      if (refreshTimer.value) {
        clearInterval(refreshTimer.value)
      }
      window.removeEventListener('resize', handleResize)
    })

    return {
      chartType,
      chartPeriod,
      coreStats,
      chartData,
      chartOption,
      handlePeriodChange,
      handleChartTypeChange,
      getChartSubtitle,
      getCurrentChartColor,
      getCurrentChartTotal,
      getCurrentChartGrowth
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background: #f5f7fa;
  height: calc(100vh - 60px); /* 减去顶部导航栏高度 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 核心统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
  min-height: 160px;
  animation: cardFadeIn 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

.stat-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.15),
    0 16px 20px -8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(102, 126, 234, 0.3);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409eff 0%, #67c23a 25%, #e6a23c 75%, #f56c6c 100%);
  background-size: 200% 100%;
  transform: scaleX(0);
  transition: all 0.4s ease;
  border-radius: 20px 20px 0 0;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.stat-card:hover::before {
  transform: scaleX(1);
  animation: shimmer 2s ease-in-out infinite;
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

.stat-icon .el-icon {
  font-size: 32px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.user-icon { 
  background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.4);
}
.resource-icon { 
  background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
  box-shadow: 0 4px 15px rgba(103, 194, 58, 0.4);
}
.download-icon { 
  background: linear-gradient(135deg, #e6a23c 0%, #cf9236 100%);
  box-shadow: 0 4px 15px rgba(230, 162, 60, 0.4);
}
.comment-icon { 
  background: linear-gradient(135deg, #f56c6c 0%, #dd6161 100%);
  box-shadow: 0 4px 15px rgba(245, 108, 108, 0.4);
}

.stat-content {
  margin-bottom: 20px;
}

.stat-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.number {
  font-size: 40px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -1px;
  transition: all 0.3s ease;
}

.stat-card:hover .number {
  color: #667eea;
  text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.unit {
  font-size: 20px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.stat-label {
  font-size: 15px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 13px;
}

.stat-change {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #059669;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
  border: 1px solid rgba(5, 150, 105, 0.2);
  display: inline-flex;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-change {
  transform: scale(1.05);
}

.stat-progress {
  margin-top: 12px;
}

/* 图表区域 */
.chart-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chart-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card-header {
  padding: 24px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.header-left h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.subtitle {
  font-size: 14px;
  color: #666;
}

.header-right {
  display: flex;
  gap: 12px;
}

.chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 24px 24px;
}

.chart-header {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.chart-stats {
  display: flex;
  gap: 32px;
}

.chart-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-stat-item .label {
  font-size: 14px;
  color: #666;
}

.chart-stat-item .value {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.chart-stat-item .value.growth {
  color: #67c23a;
}

.chart-wrapper {
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding: 0 20px 20px;
  overflow: hidden;
}

/* ECharts容器样式 */
.echarts-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-width: 100%;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.echarts-container:hover {
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

/* 卡片动画效果 */
@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .card-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .header-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  .chart-wrapper {
    padding: 0 15px 20px;
  }
  
  .echarts-container {
    min-height: 280px;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 10px;
    height: calc(100vh - 60px);
    overflow: hidden;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .stat-card {
    padding: 15px;
    min-height: 120px;
  }
  
  .stat-number .number {
    font-size: 28px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    padding: 15px 15px 0;
  }
  
  .header-right {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chart-container {
    padding: 0 15px 15px;
  }
  
  .chart-wrapper {
    padding: 0 10px 15px;
  }
  
  .echarts-container {
    min-height: 250px;
    border-radius: 8px;
  }
  
  .chart-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .chart-stat-item .value {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .dashboard {
    padding: 8px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .card-header {
    padding: 12px 12px 0;
  }
  
  .header-left h3 {
    font-size: 18px;
  }
  
  .chart-container {
    padding: 0 12px 12px;
  }
  
  .chart-wrapper {
    padding: 0 8px 12px;
  }
  
  .echarts-container {
    min-height: 220px;
    border-radius: 6px;
  }
  
  .header-right {
    flex-direction: column;
    gap: 6px;
  }
  
  .header-right .el-select {
    width: 100%;
  }
}
</style> 